<!DOCTYPE html>
<html lang="en">
  <head>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <link
      id="theme"
      rel="stylesheet"
      type="text/css"
      href="../../styles/theme.css"
    />
    <link rel="stylesheet" type="text/css" href="./Help.css" />
  </head>
  <body>
    <h1>Sprites</h1>
    <p>
      Sprites are the graphics used by playable or interactive characters in
      your scenes. Add sprites to your game by adding PNG files to your
      project's
      <em>assets/sprites</em> folder.
    </p>
    <h2>Requirements</h2>
    <p>
      Sprite PNGs must only contain the following four colors:<br />
      <span class="HelpSwatch" style="background-color: #071821"></span>
      #071821,
      <span class="HelpSwatch" style="background-color: #86c06c"></span>
      #86c06c,
      <span class="HelpSwatch" style="background-color: #e0f8cf"></span>
      #e0f8cf and
      <span class="HelpSwatch" style="background-color: #65ff00"></span>
      #65ff00 (Used as transparent background).<br />
      Colors that are not one of these hex codes will be matched to the nearest
      color.
    </p>
    <p>
      A sprite consists of one or more <strong>16x16px</strong> frames laid out
      horizontally in file (e.g. a sprite with three frames will be
      <strong>48x16px</strong>)
    </p>
    <h2>Static sprites</h2>
    <p>
      For sprites that only need a single frame (e.g. interactive items such as
      signposts) create your PNG as a <strong>16x16px</strong> image containing
      just the one frame required.
    </p>
    <p>
      <img src="../../assets/help/cat.png" class="HelpSprite" />
    </p>
    <h2>Actor</h2>
    <p>
      To make sprites that can face in four directions turning towards the
      player, create a <strong>48x16px</strong> PNG containing the three frames
      forward facing, upwards facing and right facing. The left facing sprite is
      automatically generated by fliping the right facing sprite horizontally so
      does not need to be created.
    </p>
    <p>
      <img src="../../assets/help/npc001.png" class="HelpSprite" />
    </p>
    <h2>Animated Actor</h2>
    <p>
      To make sprites that have animated movement, or that can be used as a
      player character, create a <strong>96x16px</strong> PNG containing six
      frames, two forward facing, two upwards facing and two right facing
      animation frames.
    </p>
    <p>
      As there are limits to how many sprites frames can be loaded into a single
      scene don't use animated sprites unless you know your NPCs will have
      movement.
    </p>
    <p>
      <img src="../../assets/help/player.png" class="HelpSprite" />
    </p>
  </body>
</html>
